import React, { Component } from 'react';
import { CSSTransition, SwitchTransition } from 'react-transition-group';
import './transition2.css'

class Transaction2 extends Component {
  constructor() {
    super();
    this.state = {
      isShow: true
    }
  }
  render() {
    return (
      <>
      <SwitchTransition mode="out-in">
        <CSSTransition
          key={this.state.isShow}
          addEndListener={(node, done) => {
            node.addEventListener("transitionend", done, false);
          }}
          classNames="fade"
        >
          <button
            className="btn1"
            onClick={()=>this.setState({isShow: !this.state.isShow})}
          >
            {this.state.isShow?'变成false':'变成true'}
          </button>
        </CSSTransition>
      </SwitchTransition>
      </>
    );
  }
}

export default Transaction2;
